<template>
	<view style="padding-top: 292rpx;">
		<view class="top_wrapper">
			<view class="p_rel">
				<image src="https://dy.sykj365.com/uploads/mini/zhanghu@2x.png" class="a_img"></image>
				<view class="a_top p_over">
					<view class="p_color_fff p_font_28 p_margin_t_28">可用余额</view>
					<view class="p_flex2">
						<view class="p_color_fff p_font_48">
							<text class="p_font_32">¥</text>{{balance}}
						</view>
						<navigator url="/pages/my/share" hover-class="none"
							class="p_font_26 p_color_fff a_share p_flex7">
							我的分享</navigator>
					</view>
				</view>
			</view>
			<view class="p_flex2 tab_wrapper p_bg_fff">
				<view class="p_font_28 p_color_7a tab" :class="{'active': tabNum === 1}" @click="getTab(1)">收益记录</view>
				<view class="p_font_28 p_color_7a tab" :class="{'active': tabNum === 0}" @click="getTab(0)">使用记录</view>
			</view>
		</view>
		<view class="p_over" v-show="tabNum === 1">
			<noneData noneTitle="暂无数据~" v-if="listData.length === 0"></noneData>
			<view v-else>
				<view class="list_wrapper" v-for="item in listData" :key="item.id">
					<view class="p_bg_f3 p_photo_96">
						<image :src="item.avatar_image?item.avatar_image: ''" mode="aspectFill" class="p_full"></image>
					</view>
					<view class="p_flex_2">
						<view class="p_flex2">
							<view class="p_font_28 p_flex_1 p_one_text">{{item.source_name}}</view>
							<view class="p_font_28 price">+ ¥ {{item.balance}}</view>
						</view>
						<view class="p_font_26 p_color_b2 p_margin_t_8">{{item.create_time}}</view>
					</view>
				</view>
				<view class="p_font_24 p_color_7a p_text_c p_b_36" v-if="loadingText">{{loadingText}}</view>
			</view>
		</view>
		<view class="p_over" v-show="tabNum === 0">
			<noneData noneTitle="暂无数据~" v-if="listData.length === 0"></noneData>
			<view v-else>
				<view class="list_wrapper" v-for="item in listData" :key="item.id">
					<view class="p_flex_2">
						<view class="p_flex2">
							<view class="p_font_28 p_flex_1 p_one_text">订单号 {{item.order_num}}</view>
							<view class="p_font_28 price">- ¥ {{item.balance}}</view>
						</view>
						<view class="p_font_26 p_color_b2 p_margin_t_8">{{item.create_time}}</view>
					</view>
				</view>
				<view class="p_font_24 p_color_7a p_text_c p_b_36" v-if="loadingText">{{loadingText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import noneData from '../../components/noneData.vue';

	export default {
		components: {
			noneData
		},
		data() {
			return {
				balance: 0,
				tabNum: 1, // 1-收益记录 0-使用记录
				pageNum: 1,
				listData: [],
				isLastPage: false, // 是否是最后一页
				loadingText: '',
			}
		},
		onLoad(e) {
			this.balance = e.balance;
			this.getListData();
		},
		onReachBottom() {
			if (!this.isLastPage) {
				this.loadingText = '加载中...';
				this.pageNum++;
				this.getListData();
			} else {
				this.loadingText = '已加载全部';
			}
		},
		methods: {
			getListData() {
				this.$http.post(this.$api.balanceRecord, {
					page: this.pageNum,
					type: this.tabNum
				}).then(res => {
					this.listData = this.listData.concat(res.data.data);

					if (this.pageNum === res.data.last_page) {
						this.isLastPage = true;
						this.loadingText = '已加载全部';
					} else {
						this.isLastPage = false;
					}
				})
			},
			getTab(e) {
				this.tabNum = e;
				this.pageNum = 1;
				this.listData = [];
				this.isLastPage = false; // 是否是最后一页
				this.loadingText = '';
				this.getListData();
			}
		}
	}
</script>

<style lang="less">
	.a_img {
		width: 100%;
		height: 176rpx;
	}

	.a_top {
		top: 0;
		left: 40rpx;
		right: 0;
		bottom: 0;
		position: absolute;
	}

	.a_share {
		width: 136rpx;
		height: 42rpx;
		margin-left: 32rpx;
		border-radius: 60rpx;
		background: rgba(255, 255, 255, 0.2);
	}

	.tab_wrapper {
		padding: 48rpx 0 24rpx;
	}

	.tab {
		width: 128rpx;
		text-align: center;
		margin-left: 48rpx;

		&:first-child {
			margin-left: 32rpx;
		}

		&.active {
			font-size: 32rpx;
			line-height: 44rpx;
			color: #222;
			font-weight: 500;
		}
	}

	.list_wrapper {
		padding: 24rpx 32rpx;
		display: flex;
		align-items: center;

		&:last-child {
			margin-bottom: 24rpx;
		}
	}

	.price {
		width: 260rpx;
		text-align: right;
	}

	.top_wrapper {
		top: 0;
		left: 0;
		right: 0;
		position: fixed;
	}
</style>